<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="a_vuejs/vue.global.js"></script>
</head>

<body>

<div id="myApp">
    <h3>v-model:获取登录账号密码</h3>
    <form action="#" v-on:submit.prevent="login">
        用户名:<input type="text" v-model="userName"><br/>
        密码:<input type="password" v-model="password"><br/>
        地区:<br/>
        <select v-model="address">
            <option value="bj">北京</option>
            <option value="nj">南京</option>
            <option value="sz">深圳</option>
        </select><br/>
        爱好:<br/>
        <select v-model="hobbies" multiple>
            <option value="zq">足球</option>
            <option value="lq">篮球</option>
            <option value="ppq">乒乓球</option>
        </select><br/>
        <input type="submit" value="登录">
    </form>
</div>

</body>

<script>
    const app = Vue.createApp({
        data(){
            return{
                userName:'',
                password:'',
                address:'sz', //如果想让select默认选中一个option 这里设置成该option的值即可
                hobbies:[]
            }
        },
        methods:{
            login(){
                //this代表当前对象 当前对象中才有数据、方法。。。。
                console.log('userName:'+ this.userName)
                console.log('password:'+ this.password)
                console.log('address:'+ this.address)
                console.log('hobbies:'+ this.hobbies)
            }
        }
    }).mount('#myApp')
</script>

</html>